<script lang="ts" setup>
import { ref } from 'vue'
const props = withDefaults(
  defineProps<{
    textData?: string
    show: boolean
    top: number
    left: string | number
  }>(),
  {
    show: false,
    top: 56,
    left: '50%',
  },
)

const processingVal = (val: string | number) => {
  if (typeof val === 'number') {
    return val + 'rpx'
  } else {
    return val
  }
}
</script>
<template>
  <view
    class="_textData"
    :style="{ top: props.top + 'rpx', left: processingVal(props.left) }"
    v-show="props.show"
  >
    <view v-if="props.textData">{{ props.textData }}</view>
    <slot></slot>
  </view>
</template>
<style lang="scss" scoped>
._textData {
  position: absolute;
  left: 50%;
  top: 56rpx;
  transform: translateX(50%);
  width: 340rpx;
  min-height: 40rpx;
  text-align: left;
  background: #fff;
  color: #000000e5;
  font-size: 22rpx;
  border-radius: 16rpx;
  padding: 14rpx 20rpx;
  transform: translate(-50%);
  box-shadow: 0px 6rpx 16rpx 8rpx rgba(0, 0, 0, 0.05);
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word; /* 确保长词可以在适当位置断开换行 */
  z-index: 9999;
}
</style>
